<style lang="less">
#search {
  .top {
    height: 30px;
    a {
      padding: 0px 10px;
    }
  }
  .books {
    width: 100%;
    height: 210px;
    padding: 20px 30px;
    display: flex;
    background-color: pink;
    img {
      width: 110px;
      height: 150px;
    }

    .name {
      margin-left: 15px;
      p {
        margin-top: 15px;
      }
      .book-name {
        font-weight: bold;
      }
      .author {
        font-size: 18px;
      }
      .sort {
        font-size: 18px;
      }
      .words {
        font-size: 18px;
      }
      span {
        position: absolute;
        top: 205px;
        left: 240px;
      }
    }
  }
  .content {
    border: 1px solid pink;
    padding: 10px 15px;
    margin: 10px 0px;
    border-radius: 15px;
  }
  .lists {
    margin: 20px 30px 10px 30px;
    ul {
      margin-top: 20px;
      li {
        margin-bottom: 20px;
      }
    }
  }
}
</style>

<template>
  <div id="search">
    <div class="top">
      <router-link to="/index"> 返回 </router-link>
    </div>

    <div class="books">
      <div class="photo">
        <img :src="image" alt="" />
      </div>
      <div class="name">
        <p class="book-name">{{ title }}</p>
        <p class="author">作者：{{ author }}</p>
        <p class="sort">分类：{{ category }}</p>
        <p class="words">字数：{{ words }}字</p>

        <router-link  to="/rank">
          <span>开始阅读</span>
          <!-- :to="{ name:"rank"}" -->
        </router-link>
      </div>
    </div>
    <div class="content">
      {{ content }}
    </div>

    <div class="lists">
      <h4>列表详情</h4>
      <ul>
        <router-link :to="{path:'rank',query:{source_uuid:id, content_uuid:item.uuid}}" v-for="item in chapterList" >
          <li>
            <p class="listing">{{ item.title }}</p>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import { Details } from "../api/index";
import { Chapters } from "../api/index";

export default {
  data() {
    return {
      title: "",
      author: "",
      id: "",
      image: "",
      words: "",
      category: "",
      content: "",
      chapterList: [],
    };
  },
  methods: {
    getDetails(nid, title) {
      Details({
        id: nid,
        title: title,
      })
        .then((res) => {
          console.log("10", res);
          this.id = res.feed.entry.id
          this.title = res.feed.entry.title;
          this.author = res.feed.entry.author.name;
          this.category = res.feed.entry["pris:book"].category;
          this.image = res.feed.entry.link[1].href;
          this.words = res.feed.entry["pris:book"].words;
          this.content = res.feed.entry.content.text;
        })
        .catch((err) => {
          console.log("请求失败:", err);
        });
    },

    getChapter(nid) {
      Chapters({
        source_uuid: nid,
      })
        .then((res) => {
          console.log("11", res);
          let cp = res.data.catalog.map((item) => {
            let { title } = item;
            let { uuid } = item;
            // this.cid = secId;
            return { uuid, title };
          });
          this.chapterList = cp;
          // console.log('22',this.chapterList);
        })
        .catch((err) => {
          console.log("请求失败:", err);
        });
    },
  },

  mounted() {
    console.log(this.$route.query);

    const nid = this.$route.query.id;
    console.log(nid);
    const title = this.$route.query.title;
    console.log(title);

    this.getDetails(nid, title);
    this.getChapter(nid);
  },
};
</script>
